<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1.0, user-scalable=0"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>

    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>

    <title>海南一卡通</title>
    <link th:href="@{/style/loading.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/style/load_style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/style/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/style/basic.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/style/index.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/script/vue.min.js}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
</head>
<body>
<div class="container-fluid" id="cardContent">
    <div class="row">
        <!--    <div class="head" id="headTop"><a class="reback"></a><a class="rebacktxt"
                                                                    href="javascript:history.go(-1)">返回</a>海南一卡通<span
                    class="regn"></span>
            </div>-->
        <!-- 主要内容 -->
        <div class="content cf">
            <div class="cardBox">
                <div class="cardVip">
                    <i class="card-logo"></i>
                    <div v-show="openVip">
                        <i class="ico-vip"></i>
                        <template v-if="endDate != null">
                            <div class="card-valid">截止{{endDate}}</div>
                        </template>
                    </div>
                    <div v-show="novip">
                        <i class="ico-novip"></i>
                    </div>
                    <div class="card-tit">
                        <h3>海贝</h3>
                        <!--  <h4>海贝</h4>-->
                    </div>
                    <div class="card-id">{{cardNo}}</div>
                </div>
                <div class="moneyBar cf">
                    <div class="balance">
                        <p class="tit">余额(元)</p>
                        <p class="num">{{balance1}}.<em>{{balance2}}</em></p>
                    </div>
                    <div class="coupon" v-on:click="coupon_list">
                        <p class="tit">优惠券</p>
                        <p class="num">{{coupon}}<em>张</em></p>
                    </div>
                </div>
                <div class="m_t_10 cf tc">
                    <input class="btn btn_red02" v-on:click="qrcodePay" style="width:48%;" type="submit" name="button"
                           id="qrcode_pay"
                           value="扫码付款"/>
                    <input class="btn btn_red03" v-on:click="online_recharge" style="width:48%;" type="submit"
                           name="button" id="button2"
                           value="在线充值"/>
                </div>
            </div>
            <div class="bg_fffBar01 cf m_b_10">
                <ul class="list02 p_l_12 p_r_12">
                    <li class="cf" v-on:click="vip_product">
                        <span class="fl tit">我的VIP权益</span>
                        <span class="fr cue">
                                                尊享9.5折加油权益
                                                <a class="btn_ses-02" href="#"></a>
                                            </span>
                    </li>
                    <li class="cf" v-on:click="invite">
                        <span class="fl tit">邀请有礼</span>
                        <span class="fr cue">
                                                超值奖品等你拿
                                                <a class="btn_ses-02" href="#"></a>
                                            </span>
                    </li>
                </ul>
            </div>
            <div class="bg_fffBar01 cf m_b_10">
                <ul class="list02 p_l_12 p_r_12">

                    <li class="cf" v-on:click="trans_record">
                        <span class="fl tit">交易记录</span>
                        <span class="fr cue">
									<a class="btn_ses-02" href="#"></a>
								</span>
                    </li>
                    <li class="cf" v-on:click="merchant">
                        <span class="fl tit">特约商家</span>
                        <span class="fr cue">
									<a class="btn_ses-02" href="#"></a>
								</span>
                    </li>
                    <li class="cf" v-on:click="setting">
                        <span class="fl tit">设置</span>
                        <span class="fr cue">
									<a class="btn_ses-02" href="#"></a>
								</span>
                    </li>
                </ul>
            </div>
            <div class="note01 tc" style="text-align: center;padding: 0;">
                <img th:src="@{/images/qr_ykt.jpg}" style="width: 80px;height: 80px;"/>
                <p>扫描关注海南一卡通，更多优惠等待您</p>
            </div>
            <div class="note01 tc" style="padding: 0;">
                <p>客服热线：963001</p>
                <!--	<p>客服邮件：yikatong@hnair.com</p>-->
            </div>
        </div>
        <!-- end 主要内容 -->
    </div>
    <div></div>
</div>
<div th:replace="loading::loadtemp"></div>
<!--JavaScript插件都是依赖与jQuery库-->
<script th:src="@{/script/jquery.min.js}"></script>
<script th:src="@{/script/bootstrap.min.js}"></script>
<script th:src="@{/script/layer/layer.js}"></script>
<script th:src="@{/script/verifVersion.js}"></script>
<script th:inline="javascript">
    var userInfo = new Vue({
        el: '#cardContent',
        data: {
            cardNo: null,
            coupon: null,
            balance1: null,
            balance2: null,
            openVip: false,
            novip: true,
            endDate: null
        },
        methods: {
            init: function () {
                $.ajax({
                    type: "post",
                    url: "/CardOilServer/server/initUserInfo",
                    beforeSend: function () {
                        load.loading = true;
                    },
                    success: function (data) {
                        load.loading = false;
                        var strBalance = data.result.balance;
                        if (strBalance != null) {
                            userInfo.balance1 = strBalance.length > 2 ? strBalance.substring(0, strBalance.length - 2) : "0";
                            userInfo.balance2 = strBalance.length > 1 ? strBalance.substring(strBalance.length - 2, strBalance.length) : ("0" + strBalance);
                        }
                        userInfo.coupon = data.result.coupon_count;
                        userInfo.cardNo = data.result.card_no;
                        if (data.result.is_vip == "1") {
                            userInfo.openVip = true;
                            userInfo.novip = false;
                            userInfo.endDate = data.result.valid_end_date;
                        } else {
                            userInfo.openVip = false;
                            userInfo.novip = true;
                        }
                        if(data.errcode == "90009" || data.errcode == "30005"){
                            layer.msg(data.errmsg);
                            setTimeout(function () {
                                window.location.href = "/CardOilServer/wechat/index";
                            },1000);
                            return;
                        }
                    },
                    error: function () {
                        layer.msg("服务异常");
                        load.loading = false;
                    }
                });
            },
            qrcodePay: function () {
                window.location.href = "/CardOilServer/page/pay_qrcode";
            },
            online_recharge: function () {
                window.location.href = "/CardOilServer/page/recharge";
            },
            vip_product: function () {
                window.location.href = "/CardOilServer/page/vip_product";
            },
            invite: function () {
                window.location.href = "/CardOilServer/page/invite";
            },
            trans_record: function () {
                window.location.href = "/CardOilServer/page/transa_record";
            },
            setting: function () {
                window.location.href = "/CardOilServer/page/setting";
            },
            coupon_list: function () {
                window.location.href = "/CardOilServer/page/coupon_list";
            },
            merchant: function () {
                //window.location.href = "http://xapps.yktcards.com/web-wxmp/wxmp/biz/merchant";
                window.location.href = "/CardOilServer/h5/mrch";
            }
        }
    });
    userInfo.init();
    wxJsSdkInit();

    var obj = new Object();
    obj.url = window.location.href;
    var wxConfig = false;
    eventListener();
    function wxJsSdkInit() {
        $.ajax({
            type: "post",
            url: "/CardOilServer/wechat/sdkInit",
            data: obj,
            beforeSend: function () {
            },
            success: function (data) {
                wx.config({
                    debug: false,
                    appId: data.appid,
                    timestamp: data.timestamp,
                    nonceStr: data.nonceStr,
                    signature: data.signature,
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', "closeWindow"]
                });
                wx.ready(function () {
                    wxConfig = true;
                    wx.onMenuShareTimeline({
                        title: '用海贝，享95折加油！手机充值更便捷，支付优惠天天有！', // 分享标题
                        link: verBaseUrl + "wechat/index",
                        imgUrl: verBaseUrl + 'images/card-logo.png', // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数

                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                    wx.onMenuShareAppMessage({
                        title: '用海贝享95折加油，手机充值更便捷', // 分享标题
                        desc: '支付还有优惠抢哦！最高立减8元', // 分享描述
                        link: verBaseUrl + "wechat/index", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: verBaseUrl + 'images/card-logo.png', // 分享图标
                        type: '', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });

                });
                // layer.msg(data.result.swift_number);
            },
            error: function () {
                layer.msg("服务异常");
                load.loading = false;
            }
        });
    }
    function eventListener() {
        pushHistory();
        var u = navigator.userAgent,
            app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        var flag = false;
        setTimeout(function () {
            flag = true;
        }, 100);
        window.addEventListener('popstate', function (e) {
            //监听到返回事件
            if (flag) {
                if (isIOS) {
                 //   history.go(-1);
                   // layer.msg("返回到"+"/CardOilServer/wechat/index");
                    location.href = "/CardOilServer/wechat/index";
                } else if (isAndroid) {
                    if (wxConfig) {
                        wx.closeWindow();
                    }
                }
            } else {
                history.go(-1);
            }
        }, false);
    }
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
</script>
</body>
</html>
